<template>
	<view class="news-main-view">
		<page-head :transparent='false'>
			<slot slot="left"><span></span></slot>
			<slot slot="title">{{title.length>10?title.substr(0,10)+'...':title}}</slot>
			<slot slot="right"><span /></slot>
		</page-head>
		<view style="height: 10px;"></view>
		<view class="news-main-row">
			<view class="news-main">
				<view class="news-main-top" v-for="(item,inx) in newsList" :key="inx" @click="toDetail(item)">
					<view class="top-news">
						<view class="news-main-img">
							<image :src="item.headpic" mode="scaleToFill"></image>
						</view>
						<view class="news-title-row">
							<view class="news-title">
								<text>{{item.title}}</text>
							</view>
							<view class="news-source-row">
								<text>{{item.source}}</text>
								<text> 0 评论</text>
								<text>{{item.pub_time}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="loading-text">{{ loadingText }}</view>
		</view>
	</view>
</template>

<script>
	import {
		friendlyDate
	} from '@/common/js/util.js';
	let page = 1;
	export default {
		data() {
			return {
				title: '新闻资讯',
				newsList: [],
				loadingText: '正在加载...',
			}
		},
		onLoad() {
			this.genList();
		},
		onReachBottom: function() {
			page++;
			this.genList();
		},
		methods: {
			async genList() {
				let data = {
					cid: 4,
					page: page,
					psize: 20
				}
				let res = await this.$request.get('/coupon-product/temp/newsList', {
					data: data
				});
				if (res.data.code == 200) {
					const list = res.data.data.map((news) => {
						return {
							id: news.aid,
							"pub_time": friendlyDate(new Date(news.pub_time * 1000).getTime()),
							"click_count": news.click_count,
							"source": news.source,
							"title": news.title,
							"headpic": news.headpic,
							"source_url": news.source_url
						};
					});
					this.newsList = this.newsList.concat(list);
					console.log(list.length)
					if (list.length < 10) {
						this.loadingText = '没有更多数据了';
					} else {
						this.loadingText = '正在加载...';
					}
				} else {
					this.loadingText = '没有更多数据了';
				}

			},
			toDetail(item){
				let url = '/pages/news/detail?id='+item.id+'&title='+item.title;
				h5NavigateTo(url, url);
			}
		}
	}
</script>

<style lang="scss">
	.news-main-view {
		width: 100%;
		// background-color: #EEEEEE;

		.news-main-row {
			width: 100%;

			.loading-text {
				display: flex;
				justify-content: center;
			}

			.news-main {
				width: 94%;
				margin-left: 3%;
				// height: 240px;

				.news-main-top {
					width: 100%;
					height: 220upx;

					.top-news {
						widows: 100%;
						height: 200upx;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						background-color: white;
						border: 1Px #dadada solid;
						box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.1);

						.news-main-img {
							width: 38%;
							height: 100%;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.news-title-row {
							width: 60%;
							height: 100%;
							display: flex;
							flex-direction: column;

							.news-title {
								width: 98%;
								height: 70%;
								lines: 2;
								text-overflow: ellipsis;
								font-size: 26px;
								color: #555555;
							}

							.news-source-row {
								width: 98%;
								height: 20%;
								font-size: 22px;
								color: #BBBBBB;
								display: flex;
								justify-content: space-between;
								align-items: flex-end;
							}
						}
					}
				}

			}
		}
	}
</style>
